<template>
  <div class="app-main" id="micro">
    <div class="left" :style="styles">
      <query @querystyle="styleChange"></query>
    </div>
    <div class="right">
      <div class="map-tool">
        <!-- <map-tool :image="toolImageParams"></map-tool> -->
      </div>
      <!-- 盛放地图的容器 -->
      <div class="content">
        <layer></layer>
      </div>
    </div>
  </div>
</template>

<script>
import Query from "./query/index";
// import MapTool from "../../../../components/MapTool/tool"; // 地图工具栏组件
import Layer from "./map/index"; // 地图组件
export default {
  name: "micro",
  components: {
    Query,
    // MapTool,
    Layer // 地图组件
  },
  data() {
    return {
      toolImageParams: {
        el: "map", // 所需要截图的元素id
        insertEl: "micro" // 插入截图的元素id
      }, // 截图传递的参数
      styles: {} // query组件样式
    };
  },
  mounted() {},
  created() {},
  methods: {
    styleChange(style) {
      this.styles = style;
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.app-main {
  width: 100%;
  height: 100%;
  position: relative;
  .left {
    position: absolute;
    left: 50px;
    min-height: 50px;
    max-height: calc(100% - 50px);
    top: 25px;
    z-index: 401;
  }
  .right {
    height: 100%;
    width: 100%;
    background: #ccc;
    .map-tool {
      position: absolute;
      right: 50px;
      top: 25px;
      z-index: 401;
    }
    .content {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
